<template>
  <div id="main">
    <div id="sum">
      <div id="article">
        <Article></Article>
      </div>
      <div id="function">
        <Write></Write>
        <Classity></Classity>
        <Recommend></Recommend>
        <Effect></Effect>
      </div>
    </div>
  </div>
</template>
<script>
import Article from "@/components/Article.vue";
import Effect from "@/components/Effect.vue";
import Write from "@/components/Write.vue";
import Recommend from "@/components/Recommend.vue";
import Classity from "@/components/Classity.vue";

export default {
  name: "write",
  components: {
    Write,
    Classity,
    Recommend,
    Effect,
    Article,
  },
};
</script>
<style scoped>

@media screen and (min-width: 980px) {
  #sum {
    min-width: 1000px;
    width: 70%;
    margin: auto;
    margin-top: 60px;
  }
  #article {
    width: 69%;

    background-color: #fff;
    min-height: 150px;
    float: left;
  }
  #function {
    width: 30%;
    float: right;
  }
}


@media screen and (max-width: 980px) {
  body {
    background-color: #f5f5f5;
  }
  #sum {
    width: 90%;
    margin: auto;
  }
  #article {
    margin-top: 52px;
    background-color: red;
    min-height: 150px;
    width: 100%;
  }
  #function {
    width: 100%;
  }
  body {
    background-color: #fff;
  }
}
</style>

